@import 'reset.css';
@import 'fonts.css';

@body-bg: #111;
@player-bg: lighten(@body-bg, 10%);
@player-w: 375px;
@player-h: 550px;

html,body{
	height: 100%;
}

body{
	background-color: @body-bg;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font: 16px "微软雅黑";
}

.player{
	width: @player-w;
	height: @player-h;
	background-color: @player-bg;
	border-radius: 10px;
	position: relative;
	
	.header{
		padding: 15px 0;
		text-align: center;
	}

	.albumPic{
		background-size: cover;
		width: @player-w * 0.72;
		height: @player-w * 0.72;
		margin: auto;
		border-radius: 10px;
	}

	.trackInfo{
		text-align: center;
		padding: 20px 0 15px;
		font-size: 14px;
		white-space: nowrap;

		.name{
			font-size: 24px;
			margin-bottom: 10px;
			font-weight: bold;
		}
	}

	.progress{
		width: 0;
		height: 20%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(top, rgba(255, 255, 255, 0), #0099FF);
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		opacity: .4;
	}

	.controls{
		position: relative;

		.play{
			cursor: pointer;
			width: 75px;
			height: 75px;
			border: 2px solid #ccc;
			border-radius: 50%;
			margin: auto;
			display: flex;
			align-items:center;
			justify-content:center;
			color: #fff;
			font-size: 35px;

			&:hover{
				font-size: 40px;
			}
		}

		.btn(){
			cursor: pointer;
			position: absolute;			
			top: 25px;
			font-size: 30px;

			&:hover{
				font-size: 32px;
			}
		}

		.previous{	
			.btn;		
			left: 60px;
		}

		.next{
			.btn;
			right: 60px;
		}
	}

	.time{
		width: @player-w - 40px;
		display: flex;
		position: absolute;
		bottom: 0;
		padding: 20px;
		align-items: center;
		justify-content: space-between;

		.current{

		}

		.total{

		}
	}
}